<template>
  <div class="m-container">
    <el-table :data="tasks" style="width: 100%">
      <el-table-column prop="id" label="编号" width="50"></el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="taskType" label="类型" width="80"></el-table-column>
      <el-table-column width="100" label="状态" prop="stateName"></el-table-column>
      <el-table-column prop="totalWage" label="总额" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button @click="exportExcel(scope.row)" type="text" size="small">导出数据</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {getWageTasks,stateType,getWagesOfTask} from '@/api/salary'
import XLSX from 'xlsx'
import {openDownloadDialog,sheet2blob} from '@/api/utils'
export default defineComponent({
  setup(props){
    return {
      stateType
    }
  },
  name:'Account',
  data() {
    return {
      tasks: [],
      query: {
        state: 2
      }
    }
  },
  mounted() {
    this.getFinishedTasks()
  },
  methods: {
    // 获取已完成的绩效工资任务
    getFinishedTasks() {
      getWageTasks(2).then(res => {
        this.tasks = res.data
      })
    },
    // 导出excel
    exportExcel(row: any) {
      getWagesOfTask(row.id).then(res => {
        // console.log(res.data)
        let sheet = XLSX.utils.json_to_sheet(res.data)
        openDownloadDialog(sheet2blob(sheet, 'sheet1'), `${row.name}.xlsx`);
      })
    }
  }
})
</script>
<style scoped>
</style>
